<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

<!-- 可选的 Bootstrap 主题文件（一般不用引入） -->
<link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap-theme.min.css" integrity="sha384-6pzBo3FDv/PJ8r2KRkGHifhEocL+1X2rVCTTkUfGk7/0pbek5mMa1upzvWbrUbOZ" crossorigin="anonymous">
 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/layui/2.11.5/css/layui.css" integrity="sha512-SGpnogj026QKlDY3yDe/KwNHdy9Q8pmtxE6h6orMo99teoUPxbLz+leANApR/hEohYxfRglQz0cx0AcWGXQXew==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/layui/2.11.5/layui.js" integrity="sha512-oqZ/orzPk6WPklCkJNpTLRpTOpNNvgPM+MkvoGw2s3ZZV2bduXjUdY0k4eFIIksJ6dtv88c/vCq52VxPZGSWlA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
<script src="../js/pubilc.js"></script>
<style>
        /* body{
            padding-left: 200px;
           
        } */
        .div{
            width: 500px;
            height: 300px;
            background-color: #f5f5f5;
            padding: 20px;
            border-radius: 10px;
            margin-left: 1000px;
            display: none;
        }
        .xinniji{
             width: 500px;
            height: 300px;
            background-color: #f5f5f5;
            padding: 20px;
            border-radius: 10px;
            margin-left: 1000px;
            display: none;
        }
        .table{
            width: 900px;
            margin-left: 100px;
            margin-top: 50px;
            
        }
        /*   */
        .chakan{
            width: 500px;
            height: 300px;
            background-color: #f5f5f5;
            /* padding: 20px; */
            border-radius: 10px;
            margin-left: 1000px;
            display: none;
        }
        th{
            text-align: center;
        }
        /* .sss{
            width: 200px;
            height: 150px;
            background-color: #f5f5f5;
            padding: 20px;
            border-radius: 10px;
            margin-left: 1000px;
            display: none;
        } */
         #sele{
            width: 200px;
            height: 30px;
            margin-left: 100px;
         }
          .table>tbody>tr>td, .table>tbody>tr>th, .table>tfoot>tr>td, .table>tfoot>tr>th, .table>thead>tr>td, .table>thead>tr>th{
            vertical-align: middle;
        }
    </style>
</head>
<body>
    <button type="button" class="btn btn-primary" onclick="xin()" >新增年级</button>
    <table class="table table-striped text-center" >
    <thead >
        <tr>
            <th>班级名称</th>
            <th>等级</th>
            <th>操作</th>
        </tr>
    </thead>
    <tbody id="tbody">
    </tbody>
</table>
<div class="div">
    <span id="sp">新增</span>
    <div class="form-group">
        <label for="name">班级名称</label>
        <input type="text" class="form-control" id="name" placeholder="请输入班级名称">
    </div>
    <div class="form-group">
        <label for="level">等级</label>
        <input type="text" class="form-control" id="level" placeholder="请输入等级">
    </div>
    <button type="button" class="btn btn-primary btn-lg active"  onclick="add()">确定</button>
<button type="button" class="btn btn-default btn-lg active" onclick="onadd()" >取消</button>
  
</div>
<div class="xinniji">
    所属年级：<span class="sp2"></span><br>
     <label for="name">班级名称</label>
        <input type="text" class="form-control" id="name2" placeholder="请输入班级名称">
         <button type="button" class="btn btn-primary btn-lg active"  onclick="add2()">确定</button>
<button type="button" class="btn btn-default btn-lg active" onclick="onadd2()" >取消</button>
</div>
<!-- <div class="sss">
    <span>是否确认删除</span>
    <button type="button" class="btn btn-primary btn-lg active"  onclick="add3(i)">确定</button>
</div> -->
<div class="chakan">
   <select name="" id="sele">
    <option value="" id="sele2"></option>
   </select>
    <button onclick="qwe()" style="margin-top: 150px;">取消</button>
</div>
<script>
var tbody = document.getElementById("tbody");
var div = document.getElementsByClassName('div')[0]

var data = [
    // {ban:'大一',deng:'1'},
    // {ban:'大二',deng:'2'},
    // {ban:'大三',deng:'3'}
]
var kly;
function xin(){
      name.value = ''
    level.value = ''
div.style.display = 'block'
kly=-1

}
function onadd(){
    div.style.display = 'none'
     name.value = ''
    level.value = ''
}
a()
function a(){
    // tbody.innerHTML=''
    // for(var i=0;i<data.length;i++){
    //     tbody.innerHTML+=`<tr>
    //     <td>${data[i].ban}</td>
    //     <td>${data[i].deng}</td>
    //     <td>
    //         <span onclick="bian(${i})">编辑</span>
    //          <span onclick="shan(${i})">删除</span>
    //           <span onclick="xinn(${i})">新增班级</span>
    //            <span onclick="cha(${i})">查看</span>
          
    //     </td>
    // </tr>`
    // }
// var id = sessionStorage.getItem('id')
// var token = sessionStorage.getItem('token')
     xhr({
    methods:'get',
    url:`/gradeAndClass/getGradeAndClass?grade_school_id=${Number(sessionStorage.getItem('id'))}`,
    //  data:JSON.stringify({
    //  }),
    success:function(res){
    console.log(res)
    data.push(...res)
   var da = res
   console.log(da)
    for(var i=0;i<da.length;i++){
        tbody.innerHTML+=`<tr>
        <td>${da[i].grade_name}</td>
        <td>${da[i].grade_level}</td>
        <td>
            <span onclick="bian(${i})" class="btn btn-primary m-r-5">编辑</span>
             <span onclick="shan(${i})" class="btn btn-primary m-r-5">删除</span>
              <span onclick="xinn(${i})" class="btn btn-primary m-r-5">新增班级</span>
               <span onclick="cha(${i})" class="btn btn-primary m-r-5">查看</span>
          
        </td>
    </tr>`
    }
    }
})
}

function add(){
    
  var name = document.getElementById('name');
 var level = document.getElementById('level');
    var tr = document.createElement('tr')
    if(kly==-1){
        // data.push({ban:name.value,deng:level.value})
        var id= Number(sessionStorage.getItem('id'))
         xhr({
    methods:'post',
    url:'/gradeAndClass/addGrade',
    data:JSON.stringify({
        grade_name:name.value,
       grade_school_id:id,
       grade_level:level.value
    }),
    success:function(res){
        console.log(res);
          name.value=""
    level.value=""
    }

})
    }else if(kly>=0){
        data[kly].ban = name.value
        data[kly].deng = level.value
    }
   
    onadd()
    name.value = ''
    level.value = ''
    a()
}
function bian(f){
    var name = document.getElementById('name');
 var level = document.getElementById('level');
    sp.innerHTML = '编辑'
    div.style.display = 'block'
    kly=f
    name.value = data[f].ban
    level.value = data[f].deng
    
}
var sss = document.getElementsByClassName('sss')[0]
function shan(i){
  var userResponse = confirm("是否确认删除");
if (userResponse) {
data.splice(i, 1)
       tbody.innerHTML=''
       for(var i=0;i<data.length;i++){
        tbody.innerHTML+=`<tr>
        <td>${data[i].ban}</td>
        <td>${data[i].deng}</td>
        <td>
            <span onclick="bian(${i})">编辑</span>
             <span onclick="shan(${i})">删除</span>
              <span onclick="xinn(${i})">新增班级</span>
               <span onclick="cha(${i})">查看</span>
          
        </td>
    </tr>`
   
}
} else {

}
      
  
}
var oo;
var oo2;
var sp2 = document.getElementsByClassName('sp2')[0]
var xinniji = document.getElementsByClassName('xinniji')[0]
function xinn(i){

    sp2.innerHTML = data[i].grade_name
    xinniji.style.display = 'block' 
    oo2 = data[i].grade_name
    console.log(data) 
    oo = data[i].Id
         
         console.log(data[i].Id)
   
   
    
}
function onadd2(){
     xinniji.style.display = 'none'
     sp2.innerHTML=''
}

 var chakan  = document.getElementsByClassName('chakan')[0]
function cha(i){
   chakan.style.display ='block'
      var asd = data[i].grade_name
      var sele2 = document.getElementById('sele2');
      sele2.innerHTML=`${asd}`
      var asd2;
      xhr({
    methods:'get',
    url:`/gradeAndClass/getGradeAndClass?grade_school_id=${Number(sessionStorage.getItem('id'))}`,
    //  data:JSON.stringify({
    //  }),
    success:function(res){
    console.log(res)
    data.push(...res)
   var da = res
   console.log(da)
   
       for(j=0;j<da[i].gradeClasses.length;j++){
       console.log(da[i].gradeClasses[j].class_name)
       asd2 = da[i].gradeClasses[j].class_name
       var sele = document.getElementById('sele');
       sele.innerHTML+=`<option value="${asd2}">${asd2}</option>`
       
       }
    
  
   console.log(asd2)
 
    }
})

  

}
// var asdf = layui.use
// console.log(asdf.datae)
function add2(){
   
    var level = document.getElementById('level');
    console.log(name2.value)
    var na = name2.value
  
    xhr({
    methods:'post',
    url:'/gradeAndClass/addClass',
    data:JSON.stringify({
        class_name:name2.value,
       grade_id:oo,
    }),
    success:function(res){
        console.log(res);
          name2.value=""
  
    }

})
    onadd2()
    name2.value = ''
}


   function qwe(){
    chakan.style.display ='none'
   }
</script>
<script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
</body>
</html>